<!-- START Top Navbar-->
<nav class="navbar topnavbar" role="navigation" aria-label="navbar">
  <!-- START navbar header-->
  <div class="navbar-header">
    <a
      class="navbar-brand"
      href="{{ 'partner.general.DOCUMENT_URL' | translate }}"
      target="_blank">
      <div class="brand-logo">
        <img class="img-fluid" src="assets/img/logo.png" alt="App Logo" />
      </div>
      <div class="brand-logo-collapsed">
        <img
          class="img-fluid"
          src="assets/img/logo-single.png"
          alt="App Logo" />
      </div>
    </a>
  </div>
  <!-- END navbar header-->
  <!-- START Left navbar-->
  <ul class="navbar-nav mr-auto flex-row">
    <li class="nav-item">
      <!-- Button used to collapse the left sidebar. Only visible on tablet and desktops-->
      <a
        class="nav-link d-none d-md-block d-lg-block d-xl-block"
        trigger-resize=""
        (click)="toggleCollapsedSidebar()"
        *ngIf="!isCollapsedText()">
        <em class="fas fa-bars"></em>
      </a>
      <!-- Button to show/hide the sidebar on mobile. Visible on mobile only.-->
      <a
        class="nav-link sidebar-toggle d-md-none"
        (click)="
          switchers.toggleFrameSwitcher('leftSideToggled');
          $event.stopPropagation()
        ">
        <em class="fas fa-bars"></em>
      </a>
    </li>
  </ul>
  <!-- END Left navbar-->
  <!-- START Right Navbar-->
  <div class="navbar-nav flex-row">
    <app-global-notifications class="mr-3 my-auto"></app-global-notifications>
    <div
      *ngIf="
        !clusterNameError &&
        !((isMasterRole && isAllowedToRedirectMultiCluster) || isMemberRole)
      ">
      <button mat-button class="nav-item nav-white nav-border">
        <label
          class="selected-cluster-text"
          style="position: relative; margin-bottom: 0"
          >{{ clusterName }}</label
        >
      </button>
    </div>
    <ng-container *ngIf="!clustersError">
      <div *ngIf="isMasterRole && isAllowedToRedirectMultiCluster">
        <button
          mat-button
          #menuTrigger="matMenuTrigger"
          [matMenuTriggerFor]="dropdown_multiCluster"
          [matMenuTriggerData]="clusters"
          class="nav-item nav-white nav-border">
          <i
            class="fa-lg mr-lg text-gray-light"
            [ngClass]="isOnRemoteCluster ? 'fa fa-laptop' : 'fa fa-home'"></i>
          <label
            class="selected-cluster-text hand mr-2"
            style="position: relative; margin-bottom: 0"
            >{{ selectedCluster?.name }}</label
          >
          <mat-icon>
            {{ menuTrigger.menuOpen ? 'expand_less' : 'expand_more' }}
          </mat-icon>
        </button>
        <mat-menu #dropdown_multiCluster="matMenu">
          <ng-container *ngFor="let cluster of clusters; last as last">
            <div class="cluster-menu-width">
              <button
                mat-menu-item
                (click)="redirectCluster(cluster)"
                [disabled]="
                  cluster.status === 'disconnected' ||
                  cluster.status === 'left' ||
                  cluster.status === 'joint_upgrade_required' ||
                  cluster.status === 'kicked'
                ">
                <i
                  class="fa-md mr-md"
                  [ngClass]="
                    cluster.clusterType === 'master'
                      ? 'fa fa-home'
                      : 'fa fa-laptop'
                  "></i>
                {{ cluster?.name }}
              </button>
            </div>
            <mat-divider *ngIf="!last"></mat-divider>
          </ng-container>
        </mat-menu>
      </div>
      <div *ngIf="isMemberRole">
        <button mat-button class="nav-item nav-white nav-border no-pointer">
          <i class="fa fa-home fa-lg mr-lg text-gray-light brightness-70"></i>
          <label
            class="selected-cluster-text mr-lg mb-0 brightness-70"
            [matTooltip]="primaryMasterName"
            [matTooltipDisabled]="primaryMasterName.length < 20"
            >{{
              primaryMasterName | shortenFromMiddle: 20
            }}
            &nbsp;&nbsp;/&nbsp;&nbsp;</label
          >
          <i class="fa fa-laptop fa-lg mr-lg text-gray-light"></i>
          <label
            class="selected-cluster-text mr-lg mb-0"
            style="position: relative"
            [matTooltip]="managedClusterName"
            [matTooltipDisabled]="managedClusterName.length < 20"
            >{{ managedClusterName | shortenFromMiddle: 20 }}
          </label>
        </button>
      </div>
    </ng-container>
    <div class="docURLBase mr-1">
      <a
        class="far fa-question-circle nv-help"
        href="{{ 'partner.general.DOCUMENT_URL' | translate }}"
        target="_blank"></a>
    </div>
    <button
      mat-button
      #avatarMenuTrigger="matMenuTrigger"
      [matMenuTriggerFor]="menu"
      class="nav-item nav-white nav-border">
      <div class="d-flex justify-content-between align-items-center">
        <ng-container *ngIf="gravatarEnabled; else altAvatar">
          <div class="avatar">
            <ngx-avatar
              gravatarId="{{ email }}"
              name="{{ username }}"></ngx-avatar>
          </div>
        </ng-container>
        <ng-template #altAvatar>
          <div class="avatar">
            <ngx-avatar name="{{ username }}"></ngx-avatar>
          </div>
        </ng-template>
        <div class="info mr-1">
          <div>{{ username }}</div>
          <div>{{ displayRole }}</div>
        </div>
        <mat-icon>
          {{ avatarMenuTrigger.menuOpen ? 'expand_less' : 'expand_more' }}
        </mat-icon>
      </div>
    </button>
    <mat-menu #menu="matMenu">
      <div class="menu-width">
        <button mat-menu-item (click)="goProfile()">
          <i class="eos-icons icon-18 margin-right-s">badge</i>
          {{ 'enum.MY_PROFILE' | translate }}
        </button>
      </div>
      <button
        *ngIf="!isOnRemoteCluster && isAllowedToOperateMultiCluster"
        mat-menu-item
        (click)="goMultiCluster()">
        <i class="eos-icons icon-18 margin-right-s">organisms</i>
        {{ 'enum.MULTI_CLUSTER' | translate }}
      </button>
      <button
        mat-menu-item
        (click)="goFederatedPolicy()"
        *appDisplayControl="'multi_cluster'">
        <i class="eos-icons icon-18 margin-right-s">policy</i>
        {{ 'enum.FED_POLICY' | translate }}
      </button>
      <button *ngIf="!isSUSESSO" mat-menu-item (click)="logout()">
        <i class="eos-icons icon-18 margin-right-s">logout</i>
        {{ 'enum.LOGOUT' | translate }}
      </button>
    </mat-menu>
  </div>
  <!-- END Right Navbar-->
</nav>
<!-- END Top Navbar-->
